<template>
  <div class="songline" id="a">
    <!-- hover的样式 -->
    <div class="hov">
      <div class="empty"></div>
      <!-- # 播放按钮-->
    </div>
    <div class="songlist" :style="keep">
      <div class="empty"></div>
      <!-- # 序号-->
      <svg class="icon span1" aria-hidden="true" v-if="!(song.pic != music.pic || start)">
        <use xlink:href="#icon-zhengzaibofang"></use>
      </svg>
      <span class="span1" id="spanNone">
        <span>{{ music.index }}</span>
      </span>
      <!-- 标题 -->
      <div class="span2">
        <img :src="music.pic" alt="">
        <span>{{ music.title }}</span>
        &nbsp;&nbsp;
        <span class="author">{{ music.author }}</span>
        <!-- 一图层 -->
        <div class="svg">
          <svg class="icon span1" @click="play(start)" v-if="song.pic != music.pic || start" aria-hidden="true">
            <use xlink:href="#icon-bofang"></use>
          </svg>
          <svg class="icon span1" @click="play(start)" v-else aria-hidden="true">
            <use xlink:href="#icon-zanting1"></use>
          </svg>
          <!-- 删除按钮-->
          <svg class="icon span1" @click="deleteSong()" aria-hidden="true">
            <use xlink:href="#icon-chahao"></use>
          </svg>
        </div>
      </div>
      <!-- 专辑 -->
      <span class="span3">{{ music.album_name }}</span>
      <!-- 喜欢 -->
      <span class="span4">
        <svg class="icon" v-if="isLike" @click="delLikeMusic" aria-hidden="true">
          <use xlink:href="#icon-heart"></use>
        </svg>
        <svg class="icon" v-else @click="pushLikeMusic" aria-hidden="true">
          <use xlink:href="#icon-xihuan1"></use>
        </svg>
      </span>
      <!-- 时长 -->
      <span class="span5">03:41</span>
    </div>
  </div>
</template>

<script>
import $ from '@/jquery-1.12.4'
import { url } from "@/apiUrl"//引入地址
import { mapState } from 'vuex'

export default {
  data() {
    return {
      src: require('/public/image/1.jpg'),
      flag: true,
      url: "",
      keep: {},
      isLike:false
    }
  },
  props: {
    music: {},
    index: ''
  },
  created() {
    this.url = `${url}/`
  },
  computed: {
    ...mapState({
      song: state => state.song,
      start: state => state.start
    })
  },
  methods: {
    play(start) {
      if (this.song.pic != this.$props.music.pic || start) {//判断是播放还是暂停
        console.log("点击了播放", this.$props.music)
        this.$store.commit("getSong", this.$props.music)
      } else {
        console.log("点击了暂停")
        this.$store.commit("pause")
      }
    },
    pushSong() {
      this.$store.commit("pushSong", this.$props.music);//发送当前的index
    },
    pushLikeMusic() {
      this.$store.commit("handleAdd",
        {
          value: this.$props.music,
          fieldName: "music_id",
          callback: () => {//更新我喜欢的音乐
            this.$store.commit("getLikeMusic", [() => {
              this.updateLikeMusic()//更新小红心状态
              this.$message("已添加到我喜欢的音乐")
            }])
          }
        }
      )
    },
    updateLikeMusic() {
      this.$store.commit("isLike", [this.music,(flag) => {

        this.isLike = flag
      }])
    },
    deleteSong() {//删除播放列表的某个歌曲
      this.$store.commit("deleteSong", this.music)
    },
    delLikeMusic() {
      this.$store.commit("handleDel", {
        fieldValue: this.music,
        fieldName: "music_id",
        callback: () => {//更新我喜欢的音乐
          this.$store.commit("getLikeMusic", [() => {
            this.updateLikeMusic()//更新小红心状态
            this.$message({
              message:"已取消我喜欢的音乐",
              duration:"1422"
            })
          }])
        }
      })
    }
  },
  beforeMount() {
    this.updateLikeMusic()
  },
  beforeUpdate() {
    if (!(this.song.pic != this.music.pic || this.start)) {
      this.keep = {
        backgroundColor: "#bfb2d263",
        borderRadius: "0.7rem"
      }
    } else {
      this.keep = {
        backgroundColor: ""
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '/src/assets/common.scss';

.author {
  opacity: 0.8;
  font-size: 0.88rem;
}

.span2 {
  padding-bottom: 0.4rem;
  border-bottom: 1px #bfb2d263 solid;
}

.empty2 {
  width: 53rem;
}

.icon {
  color: gray;
}

.hov {
  display: none;
  position: absolute;
  z-index: -10;
}

.songline:hover .hov {
  .icon {
    color: #666666;
    margin-left: -1rem;
    cursor: pointer;
  }

  margin: 0 1rem;
  display: flex;
  align-items: center;
  background-color:$undercolor-1;
  width: 97.3%;
  height: 100%;
  position: absolute;
  border-radius:0.7rem;
}

.songline:hover .svg {
  position: absolute;
  left: 25rem;
  width: 7rem;
  display: block;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.songline {
  user-select: none;
  z-index: 0;
  position: relative; //会导致元素穿透
}

img {
  margin-right: 1rem;
  width: 36px;
  border-radius: 0.4rem;
}

.songlist {
  // display: none;
  position: relative; //会导致元素穿透
  margin: 1rem;
  display: flex;
  align-items: center;

}

.empty {
  width: $empty-w;

}

.span1 {
  width: $span1-w;
}

.span2 {
  width: $span2-w;
  display: flex;
  align-items: center;

  .svg {
    display: none;
  }
}

.span3 {
  width: $span3-w;
}

.span4 {
  width:10rem;
  font-size: 22px;
}

.span5 {
  width: $span5-w;
}
</style>